<template>
  <div class="mx-auto hidden">
    <VueScheduler
      :data="timelineData"
      :headers="timelineHeaders"
      :items="timelineItems"
      :options="timelineOptions"
    >
      <template #event="{ event }">
        <div
          :class="[
            event.background,
            event.text,
            'p-2',
            'w-full',
            'rounded-lg',
            'shadow-md',
            'text-xs',
            'text-left',
            'text-xs',
            'rounded-md',
            'text-nowrap',
            'overflow-auto',
            'opacity-80',
            'truncate',
          ]"
        >
          <div class="flex flex-col truncate">
            <div class="font-bold">{{ event.meta?.title }}</div>
            <div class="text-slate-200">{{ event.meta?.description }}</div>
          </div>
        </div>
      </template>
    </VueScheduler>
  </div>
  <div>
    <VueSchedulerV2
      :end="newEnd"
      :events="newData"
      :headers="timelineHeaders"
      :identifiers="timelineItems"
      :options="newOptions"
      :start="newStart"
    >
      <template #event="{ event }">
        <div class="flex flex-col truncate p-2 text-xs text-white">
          <div class="font-bold">{{ event.meta?.title }}</div>
          <div class="text-slate-200">{{ event.meta?.description }}</div>
          <div class="text-slate-300">{{ event.start }} - {{ event.end }}</div>
          <div class="text-slate-300">{{ event.end }}</div>
        </div>
      </template>
    </VueSchedulerV2>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { TimelineItem, TimelineOptions } from "./types/VueScheduler";
import VueScheduler from "./components/VueScheduler.vue";
import VueSchedulerV2 from "./components/VueSchedulerV2.vue";

interface Event {
  identiferIdx: number;
  start: Date;
  end: Date;
  meta?: {
    class?: string;
    description?: string;
    text?: string;
    title?: string;
  };
}

export default defineComponent({
  name: "App",
  components: {
    VueScheduler,
    VueSchedulerV2,
  },
  setup() {
    /**
     * Today's date
     */
    const start = new Date();
    const end = new Date();

    end.setDate(end.getDate() + 7);

    /**
     * Timeline data
     */
    const timelineData = ref<TimelineItem[]>([
      {
        row: 1,
        background: "bg-emerald-500",
        text: "text-white",
        start: "16/12/2024 00:00",
        end: "17/12/2024 00:00",
        meta: { title: "Event 1111", description: "Event 1111 description" },
      },
    ]);

    /**
     * Timeline headers
     */
    const timelineHeaders = ref(["姓名","工时"]);

    /**
     * Generate row data
     */
    const timelineItems = [
      ["张三",12],
      ["李四",20],
      ["王五",12],
      ["赵六",12],
      ["徐琪",24],
      ["朱八",36],
      ["郭九",30],
    ];

    /**
     * Timeline options
     */
    const timelineOptions = ref<TimelineOptions>({
      cellWidth: 50,
      row: {
        height: 81,
        marginTop: 4,
      },
      scale: 1,
      start: "16/12/2024 00:00",
      end: "22/12/2024 00:00",
    });

    /**
     * Refactored data
     */
    // 下面的代码需要实现功能: 获取本周的周一和周日赋值给newStart和newEnd
    const today = new Date();
    const day = today.getDay() - 1;
    const newStart = new Date(today.getFullYear(),today.getMonth(),0);
    const newEnd = new Date(today.getFullYear(),today.getMonth() + 1,0);
    console.log("newStart : ",newStart);
    console.log("newEnd : ",newEnd);

    const newOptions = ref({
      cellWidth: 50,
      rowHeight: 81,
      scaleUnit: "days",
      scaleCustom: 24,
      scrollSpeed: 0,
      timeFormat: "HH",
    });

    const newData = ref<Event[]>([
    ]);

    return {
      timelineData,
      timelineHeaders,
      timelineItems,
      timelineOptions,
      newStart,
      newEnd,
      newOptions,
      newData,
    };
  },
});
</script>
